<template>
  <div v-if="!multiple">
    <!-- 单选 -->
    <el-select
      :disabled="disabled"
      v-model="newValue"
      placeholder="请选择"
      class="innerSelect"
      @change="selectChange"
      :clearable="isClearable"
      :size="size"
      :filterable="filterable"
      @focus="focus"
      @visible-change="visibleChange"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
  <div v-else>
    <!-- 多选 -->
    <el-select
      :disabled="disabled"
      v-model="selectArr"
      placeholder="请选择"
      class="innerSelect"
      :clearable="isClearable"
      :size="size"
      :multiple="multiple"
      collapse-tags
      :filterable="filterable"
      @change="selectChange"
      @focus="focus"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'Eselect',
  props: {
    // 下拉框数组数据
    options: {
      type: Array
    },
    size: {
      type: String,
      default: 'small'
    },
    // 传进来的值作为默认选择到下拉框内 注意：类型要和value一样
    value: {
      type: String
    },
    // 清空按钮
    isClearable: {
      type: Boolean
    },
    // 可搜索
    filterable: {
      type: Boolean,
      default: false
    },
    // 多选
    multiple: {
      type: Boolean,
      default: false
    },
    // 多选默认数据
    multipleArr: {
      type: Array,
      default: () => []
    },
    // 占位符提示信息
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      newValue: '',
      selectArr: []
    }
  },
  methods: {
    selectChange (val) {
      this.$emit('EselectChange', val)
    },
    focus () {
      this.$emit('focus')
    },
    // 下拉显示隐藏触发事件
    visibleChange (val) {
      this.$emit('visibleChange', val)
    }
  },
  watch: {
    value: {
      handler (newVal) {
        this.newValue = newVal
      },
      immediate: true
    },
    multipleArr: {
      handler (newVal) {
        this.selectArr = newVal
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-select {
  width: 100%;
}
</style>
